/**
 * Created by Administrator on 2017/3/14.
 */
var Input = require('../../../src/libs/input');
var SelectDropDown = require('../../../src/libs/select-drop-down');
var Form = require('../../../src/libs/form');
var FormItem = require('../../../src/libs/form-item');
var Layer = require('../../../src/libs/layer');
var Cascader = require('../../../src/libs/cascader');
var Checkbox = require('../../../src/libs/checkbox');
var HyperLink = require('../../../src/libs/hyperlink');
var Password = require('../../../src/libs/password');
var RealName = require('../../src/complex/realName');
var GetCode = require('../../../src/libs/get-code');
var Button = require('../../../src/libs/button');
var Personal = React.createClass({
    getInitialState:function () {
        return {
            isbind:PageDM.acBinding.value
        }
    },
    render:function () {
        return <div>
                    <FormItem unValidate={this.state.isbind ?true:false} label={<span><b>*</b>开户姓名：</span>} dmbind={PageDM.acName.dmbind}>
                        {this.state.isbind ? <div>{PageDM.acName.value}</div> : <Input placeholder={PageDM.acName.placeholder} dmbind={PageDM.acName.dmbind}/>}
                    </FormItem>
                    <FormItem unValidate={this.state.isbind ?true:false} label={<span><b>*</b>身份证号码：</span>}  dmbind={PageDM.acIdNum.dmbind}>
                        {this.state.isbind ? <div>{PageDM.acIdNum.value}</div> : <Input placeholder={PageDM.acIdNum.placeholder}  dmbind={PageDM.acIdNum.dmbind}/>}
                    </FormItem>
                </div>

    }
})
var Check = React.createClass({
    getInitialState:function () {
      return{
          showTip:false
      }
    },
    componentDidMount: function(){
        var _this = this;
        UEventHub.on(PageDM.URL.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.setState({
                showTip:v.showTip
            });
        });
    },
    checkboxClick:function(v){
        PageDM.acCheckbox.setValue(v);
        PageDM.acCheckbox.onClick(v);
    },
    render:function () {
        return(
            <div className="check form-group">
                <Checkbox value={PageDM.acCheckbox.value} text="我已阅读并同意" onClick={this.checkboxClick} dmbind={PageDM.acCheckbox.dmbind}/>
                <a href={PageDM.URL.value.agreement.link} target="_blank" className="fc-link"> 《{PageDM.URL.value.agreement.name}》</a>
                {this.state.showTip ? <div className="tips-error block">{PageDM.URL.value.agreement.tips}</div>: ''}
            </div>
        )
    }
})
var FailLayer = React.createClass({
    getInitialState:function () {
        return{
            failMes:PageDM.failMes.value
        }
    },
    render:function () {
        return(
            <div className="alert-content" >
                <div className="tips tipText"><i className="iconfont icon-failure"></i>{this.state.failMes}</div>
                <div className="alert-button">
                    <input type="button" className="btn btn-confirm confirm-addbank" value="重新添加"  onClick={PageDM.addFail.confirmBack}/>
                    <a type="button" className=" " onClick={PageDM.addFail.cancelBack} >取消</a>
                </div>
            </div>

        )
    }

})
var Root = React.createClass({
    getInitialState: function () {
        return {
            realName:PageDM.realNameInfo.value,
            acBankOption:PageDM.acBankOption.value.options,
            addressOption: PageDM.acAddressOption.value.options,
            failMes:PageDM.failMes.value
        }
    },
    provinceChange:function (v) {
        var _this = this;
        _this.refs.address.setState({currentIdx:'',currentValue:'',currentText:'请选择',options:[]});
    },
    cascaderChange: function (v) {
      // var selected = this.refs.area.getValue();
        var _this = this;
        _this.refs.address.setState({currentIdx:'',currentValue:'',currentText:'请选择'});
          PageDM.acArea.setValue(v);
          PageDM.acArea.onChange(v)
    },
    acBankOptionChange:function (v) {
        var _this = this;
        PageDM.acBankOption.value.selectIndex = v.selectIndex;
        PageDM.acBankOption.value.selectValue = v.selectValue;
        PageDM.acBankOption.value.selectText = v.selectText;
        _this.refs.address.setState({currentIdx:'',currentValue:'',currentText:'请选择'});
        PageDM.acBankOption.onChange(v);
    },
    acAddressOptionChange:function (v) {
        PageDM.acAddressOption.setValue(v);
        PageDM.acAddressOption.onChange(v);
    },
    componentDidMount: function(){
        var _this = this;

        UEventHub.on('LayerOpen',function (v) {
                _this.refs[v].layerOpen();

        });
        UEventHub.on('LayerClose',function (v) {
                _this.refs[v].layerClose();
        });
        UEventHub.on(PageDM.realNameInfo.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.updateRealNameInfoHandler(v);
        });
        UEventHub.on(PageDM.acBinding.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.refs.personal.setState({isbind:v});
        });
        UEventHub.on(PageDM.acAddressOption.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.refs.address.setState({options:v.options})
            var addressSelect = _this.refs.address.getCurrentSelect();
            PageDM.acAddressOption.value.selectIndex = addressSelect.selectIndex;
            PageDM.acAddressOption.value.selectValue = addressSelect.selectValue;
            PageDM.acAddressOption.value.selectText = addressSelect.selectText;
        });
        UEventHub.on(PageDM.acBankOption.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            if(v.options != _this.state.acBankOption){
                _this.setState({
                    acBankOption:v.options
                },function () {
                    var bankSelect = _this.refs.banks.getCurrentSelect();
                    PageDM.acBankOption.value.selectIndex = bankSelect.selectIndex;
                    PageDM.acBankOption.value.selectValue = bankSelect.selectValue;
                    PageDM.acBankOption.value.selectText = bankSelect.selectText;
                })
            }

        });

        UEventHub.on('getcode',function(v){
            this.refs.getCode.toCount();
        }.bind(this));
        UEventHub.on(PageDM.acImgBtn.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT,function(v){
            var _node = this.refs.acImgBtn;
            _node.setAttribute('src',PageDM.acImgBtn.getValue());
        }.bind(this));

        UEventHub.on(PageDM.failMes.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function(v){
            _this.refs.failLayer.setState({failMes:v});
        });
        //为下拉模型补充值
        var bankSelect = _this.refs.banks.getCurrentSelect();
        // var addressSelect = _this.refs.address.getCurrentSelect();
        PageDM.acBankOption.setValue(bankSelect);
        // PageDM.acAddressOption.setValue(addressSelect);
    //    设置下拉组件的默认值
        PageDM.acBankOption.getCurrentSelect = function () {
            return _this.refs.banks.getCurrentSelect();
        };
        PageDM.acAddressOption.getCurrentSelect = function () {
            return _this.refs.address.getCurrentSelect();
        };
        UEventHub.emit("pageLoad","hello world!");
    },
    updateRealNameInfoHandler: function (v) {
        var _this = this;
        _this.refs.realName.setState({
            data:v
        })
    },
    _closeReset:function () {
        this.refs.changeForm.reset();
        PageDM.acPayPwdLayer.closeBack?PageDM.acPayPwdLayer.closeBack():"";
    },
    addCardClick:function () {
        // console.log(this.refs.changeForm)
        PageDM.aclayer.confirmBack()
    },
    formatCard:function (pagedm) {
        console.log(pagedm);
        var val = pagedm.getValue();
        val = UFormatter.formatBankCard(val);
        pagedm.setValue(val);
        pagedm.value = val.replace(/\s/g, "");
    },
    render: function () {
        var _this = this;
        var PageDM = window.PageDM;
        return (
            <div>
                <div className="mod-account container">
                    <div className="sub-nav">
                        <RealName ref="realName" data={this.state.realName}/>
                    </div>
                    <div className="account padding">
                        <div className="bank-card">
                            <div className="title-account"><span>添加银行卡</span></div>
                            <div className="tips fc-main"><i className="iconfont icon-tips"></i>（您所添加的银行账户将用于收取投资本金及收益，请认真填写以下内容，确保其真实性。)</div>
                            <div className="list mod-reg clearfix">
                                <div className="form">
                                    <Personal ref="personal" />
                                    <FormItem label={<span><b>*</b>开户行：</span>} dmbind={PageDM.acBankOption.dmbind}>
                                        <SelectDropDown ref="banks" defaultValue={PageDM.acBankOption.value.selectValue}  defaultIndex={PageDM.acBankOption.value.selectIndex} options={this.state.acBankOption} onChange={this.acBankOptionChange.bind(this)}  dmbind={PageDM.acBankOption.dmbind}/>
                                    </FormItem>
                                    <FormItem label={<span><b>*</b>开户省市：</span>} dmbind={PageDM.acArea.dmbind}>
                                        <Cascader ref="area" defaultValue={PageDM.acArea.value} provinceChange={_this.provinceChange.bind(this)} cityChange={_this.cascaderChange.bind(this)}/>
                                    </FormItem>
                                    <FormItem label={<span><b>*</b>支行名称：</span>} ref="addressFormItem" dmbind={PageDM.acAddressOption.dmbind}>
                                        <SelectDropDown ref="address" defaultValue={PageDM.acAddressOption.value.selecteValue} showTitle={true} defaultIndex={PageDM.acAddressOption.value.selectIndex} options={PageDM.acAddressOption.value.options}  onChange={this.acAddressOptionChange}/>
                                    </FormItem>
                                    <FormItem label={<span><b>*</b>银行账号：</span>} dmbind={PageDM.acBankNum.dmbind}>
                                        <Input placeholder={PageDM.acBankNum.placeholder} dmbind={PageDM.acBankNum.dmbind} onBlur={_this.formatCard.bind(_this,PageDM.acBankNum)}/>
                                    </FormItem>
                                    <FormItem label={<span><b>*</b>确认银行账号：</span>} dmbind={PageDM.acBankNum2.dmbind}>
                                        <Input placeholder={PageDM.acBankNum2.placeholder} dmbind={PageDM.acBankNum2.dmbind} onBlur={_this.formatCard.bind(_this,PageDM.acBankNum2)}/>
                                    </FormItem>
                                    <FormItem label={<span><b>*</b>预留手机号码：</span>} dmbind={PageDM.acPhone.dmbind}>
                                        <Input placeholder={PageDM.acPhone.placeholder} dmbind={PageDM.acPhone.dmbind}/>
                                    </FormItem>
                                    <FormItem label={<span><b>*</b>图形验证码：</span>} dmbind={PageDM.acImgCode.dmbind}>
                                        <Input placeholder={PageDM.acImgCode.placeholder} className="ucs-input code" dmbind={PageDM.acImgCode.dmbind}/>
                                        <HyperLink  text={<img src={PageDM.acImgBtn.value} className="f-left img-code" ref="acImgBtn" style={{height:"40px"}}/>} onClick={PageDM.acImgBtn.onClick}/>
                                    </FormItem>
                                    <FormItem label={<span><b>*</b>短信验证码：</span>} dmbind={PageDM.acMsgCode.dmbind}>
                                        <Input placeholder={PageDM.acMsgCode.placeholder} className="ucs-input code" dmbind={PageDM.acMsgCode.dmbind}/>
                                        <GetCode dmbind={PageDM.acMsgCode.dmbind} className="btn btn-code" ref="getCode" count={PageDM.acMsgBtn.count} onClick={PageDM.acMsgBtn.onClick} onMouseDown={PageDM.acMsgBtn.onMouseDown} />
                                        {/*<input type="button" className="btn btn-code btn-code-disabled" value="60秒后重新获取" dmbind={PageDM.acMsgBtn.dmbind}/>*/}
                                    </FormItem>
                                    <Check/>
                                    <div className="alert-button">
                                        <Button className="btn btn-confirm confirm-addbank" value="确认" onClick={this.addCardClick} onmousedown={PageDM.aclayer.onMouseDown} dmbind={PageDM.aclayer.dmbind}/>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="clear"></div>
                </div>
                <Layer ref={PageDM.acPayPwdLayer.dmbind} width="720px"  className="layer-addbank" closeBack={_this._closeReset.bind(this)}>
                    <div className="alert-title" style={{paddingTop:"0"}}><b></b>请设置支付密码<b></b></div>
                    <div className="alert-content" >
                        <div className="tips fc-main"><i className="iconfont icon-tips"></i>交易或账户信息更改时需输入，与登录密码不一样，安全级别更高。</div>
                        <div className="form">
                            <Form ref="changeForm">
                                <FormItem label="<b>*</b>支付密码：" dmbind={PageDM.acPayPwd.dmbind}>
                                    <Password placeholder={PageDM.acPayPwd.placeholder}  dmbind={PageDM.acPayPwd.dmbind}/>
                                </FormItem>
                                <FormItem label="<b>*</b>再输入一次：" dmbind={PageDM.acPayPwd2.dmbind}>
                                    <Password placeholder={PageDM.acPayPwd2.placeholder}  dmbind={PageDM.acPayPwd2.dmbind}/>
                                </FormItem>
                            </Form>
                        </div>
                        <div className="alert-button">
                            <input type="button" className="btn btn-confirm confirm-addbank" value="确认"  onClick={PageDM.acPayPwdLayer.confirmBack}/>
                        </div>
                    </div>
                </Layer>
                <Layer ref={PageDM.addSuccess.dmbind} width="720px"  className="layer-addbank" closeBack={PageDM.addSuccess.closeBack?PageDM.addSuccess.closeBack:''}>

                    <div className="alert-title" style={{paddingTop:"0"}}><b></b>绑卡提示<b></b></div>
                    <div className="alert-content" >
                        <div className="tips tipText"><i className="iconfont icon-success"></i>您的信息已验证通过，添加银行卡成功。</div>
                        <div className="alert-button">
                            <input type="button" className="btn btn-confirm confirm-addbank" value="返回"  onClick={PageDM.addSuccess.confirmBack}/>
                        </div>
                    </div>
                </Layer>
                {/*<FailLayer ref="failLayer" />*/}
                <Layer ref={PageDM.addFail.dmbind} width="720px"  className="layer-addbank" closeBack={PageDM.addFail.closeBack?PageDM.addFail.closeBack:''}>

                    <div className="alert-title" style={{paddingTop:"0"}}><b></b>绑卡提示<b></b></div>
                    {/*<div className="alert-content" >*/}
                        {/*<div className="tips tipText"><i className="iconfont icon-failure"></i>{this.state.failMes}</div>*/}
                        {/*<div className="alert-button">*/}
                            {/*<input type="button" className="btn btn-confirm confirm-addbank" value="重新添加"  onClick={PageDM.addFail.confirmBack}/>*/}
                            {/*<a type="button" className=" " onClick={PageDM.addFail.cancelBack} >取消</a>*/}
                        {/*</div>*/}
                    {/*</div>*/}
                    <FailLayer ref="failLayer" />
                </Layer>
            </div>
        )
    }
});
ReactDOM.render(<Root/>, document.getElementById('giraffe'));